<template>
  <div>
    <Modal
      :title="titleString"
      v-model="modelShow"
      :footer-hide="true"
      :mask-closable="false"
      width="930"
    >
      <div>
        <Spin size="large" fix v-if="spinShow"></Spin>
        <Tabs  name="div2" size="small" v-model="tabname" @on-click="tabsClick">
          <TabPane :index="1" label="基础信息" name="JiChu" tab="div2">
            <div style="overflow-y: auto; height: 45vh; margin-top: 10px">
              <row style="margin-top: 2px">
                <Col span="8" class="ivu-mb-8 ivu-pl-8">
                  <div class="itemDiv" style="margin-top: 5px">
                    <img
                      src="../../assets/iconFont/产量.png"
                      style="height: 20px; width: 25px; margin-bottom: 5px"
                    />
                    <span
                      class="text1"
                      :title="`机台号-${attrbuteObj.machineName}`"
                      style="font-size: 16px"
                      >机台号:{{ attrbuteObj.machineName }}</span
                    >
                  </div>
                </Col>
                <Col span="8" class="ivu-mb-8 ivu-pl-8">
                  <div class="itemDiv" style="display: flex; flex-direction: row; margin-top: 5px">
                    <img
                      src="../../assets/iconFont/生产状态.png"
                      style="height: 20px; width: 20px; margin-bottom: 5px; margin-right: 2px"
                    />
                    <span
                      class="text2"
                      :title="`生产状态：${attrbuteObj.stateCode}`"
                      style="display: inline-block; font-size: 16px"
                    >
                      生产状态：</span
                    >
                    <div style="display: inline">
                      <Tag
                        style="margin-top: -2px; margin-right: 15px"
                        :color="zhuanTai.color(attrbuteObj.stateCode)"
                      >
                        {{ zhuanTai.text(attrbuteObj.stateCode, gongXuStr) }}
                      </Tag>
                    </div>
                  </div>
                </Col>
                <!--                <Col span="8" class="ivu-mb-8 ivu-pl-8">-->
                <!--                  <div class="itemDiv" style="display: flex; flex-direction: row; margin-top: 5px">-->
                <!--                    <img src="../../assets/iconFont/电量.png"-->
                <!--                         style="height: 20px; width: 25px;margin-bottom: 5px">-->
                <!--                    <span class="text2" :title="`电量状态：${attrbuteObj.machineStateCodeEnum}`" style="font-size: 16px; ">电量状态：</span>-->
                <!--                    <div style="display: inline">-->
                <!--                      <Tag color="success" style="margin-top: -2px"-->
                <!--                           v-if="attrbuteObj.machineStateCodeEnum == '1'">正常运转-->
                <!--                      </Tag>-->
                <!--                      <Tag color="error" style="margin-top: -2px" v-else-if="-->
                <!--                                  attrbuteObj.machineStateCodeEnum == '3'">通讯异常-->
                <!--                      </Tag>-->
                <!--                      <Tag color="#747171" style=" margin-top: -2px" v-else>无电量状态</Tag>-->
                <!--                    </div>-->
                <!--                  </div>-->
                <!--                </Col>-->
                <Col span="8">
                  <div class="itemDiv">
                    <img
                      src="../../assets/iconFont/品种联动.png"
                      style="height: 20px; width: 25px; margin-bottom: 5px"
                    />
                    <span
                      class="text1"
                      :title="`品种：${attrbuteObj.materialName}`"
                      style="font-size: 16px"
                      >品种：{{ attrbuteObj.materialName }}</span
                    >
                  </div>
                </Col>
                <Col span="8" class="ivu-mb-8 ivu-pl-8">
                  <div class="itemDiv">
                    <img
                      src="../../assets/iconFont/时间.png"
                      style="height: 20px; width: 20px; margin-bottom: 5px; margin-right: 2px"
                    />
                    <span
                      class="text1"
                      :title="`班次开始时间：${attrbuteObj.start}`"
                      style="display: inline-block; font-size: 16px"
                    >
                      班次开始时间：{{
                        attrbuteObj.start && dayjs(attrbuteObj.start).format('MM/DD HH:mm')
                      }}</span
                    >
                  </div>
                </Col>
                <Col span="8" class="ivu-mb-8 ivu-pl-8">
                  <div class="itemDiv">
                    <img
                      src="../../assets/iconFont/时间.png"
                      style="height: 20px; width: 20px; margin-bottom: 5px; margin-right: 2px"
                    />
                    <span
                      class="text1"
                      :title="`班次结束时间：${attrbuteObj.end}`"
                      style="display: inline-block; font-size: 16px"
                    >
                      班次结束时间：{{
                        attrbuteObj.end && dayjs(attrbuteObj.end).format('MM/DD HH:mm')
                      }}</span
                    >
                  </div>
                </Col>
                <Col span="8" class="ivu-mb-8 ivu-pl-8">
                  <div class="itemDiv">
                    <img
                      src="../../assets/iconFont/时间.png"
                      style="height: 20px; width: 20px; margin-bottom: 5px; margin-right: 2px"
                    />
                    <span
                      class="text1"
                      :title="`更新时间：${attrbuteObj.lastModificationTime}`"
                      style="display: inline-block; font-size: 16px"
                    >
                      更新时间：{{
                        attrbuteObj.lastModificationTime &&
                        dayjs(attrbuteObj.lastModificationTime).format('MM-DD HH:mm')
                      }}</span
                    >
                  </div>
                </Col>
                <!--                <Col span="8" class="ivu-mb-8 ivu-pl-8">-->
                <!--                  &lt;!&ndash;                                络筒特有字段&ndash;&gt;-->
                <!--                  <div class="itemDiv">-->
                <!--                    <img src="../../assets/iconFont/产量.png"-->
                <!--                         style="height: 20px; width: 20px;margin-bottom: 5px; margin-right: 2px">-->
                <!--                    <span-->
                <!--                        style="display:inline-block; font-size: 16px;"> E系统计算总产：{{ attrbuteObj.totalLengthCal }}</span>-->
                <!--                  </div>-->
                <!--                </Col>-->
                <!--                <Col span="8" class="ivu-mb-8 ivu-pl-8">-->
                <!--                  <div class="itemDiv">-->
                <!--                    <img src="../../assets/iconFont/平均车速.png"-->
                <!--                         style="height: 20px; width: 20px;margin-bottom: 5px; margin-right: 2px">-->
                <!--                    <span class="text1" :title="`采集的总产：${attrbuteObj.totalLength}`"-->
                <!--                          style="display:inline-block; font-size: 16px;"> 采集的总产：{{ attrbuteObj.totalLength }}</span>-->
                <!--                  </div>-->
                <!--                </Col>-->
                <Col span="8" class="ivu-mb-8 ivu-pl-8" v-if="prcessArr1.includes(gongXu)">
                  <div class="itemDiv">
                    <img
                      src="../../assets/iconFont/产量查询.png"
                      style="height: 20px; width: 20px; margin-bottom: 5px; margin-right: 2px"
                    />
                    <span
                      v-if="gongXu != '络筒'"
                      class="text1"
                      :title="`当前班产：${attrbuteObj.currentShiftLength === null ? '' : parseInt(attrbuteObj.currentShiftLength)}`"
                      style="display: inline-block; font-size: 16px"
                    >
                      当前班产：{{
                        attrbuteObj.currentShiftLength === null
                          ? ''
                          : parseInt(attrbuteObj.currentShiftLength)
                      }}米</span
                    >
                    <span
                      v-else
                      class="text1"
                      :title="`当前班产：${attrbuteObj.theoreticalYarnWeight === null ? '' : parseFloat(attrbuteObj.theoreticalYarnWeight).toFixed(2)}`"
                      style="display: inline-block; font-size: 16px"
                    >
                      当前班产：{{
                        attrbuteObj.theoreticalYarnWeight === null
                          ? ''
                          : parseFloat(attrbuteObj.theoreticalYarnWeight).toFixed(2)
                      }}kg</span
                    >
                  </div>
                </Col>
                <Col span="8" class="ivu-mb-8 ivu-pl-8">
                  <div class="itemDiv">
                    <img
                      src="../../assets/iconFont/线圈 (1).png"
                      style="height: 20px; width: 20px; margin-bottom: 5px; margin-right: 2px"
                    />
                    <span
                      class="text1"
                      :title="`运行效率：${attrbuteObj.runEfc}`"
                      style="display: inline-block; font-size: 16px"
                    >
                      运行效率：{{ attrbuteObj.runEfc }}%</span
                    >
                  </div>
                </Col>
                <Col span="8" class="ivu-mb-8 ivu-pl-8" v-if="prcessArr2.includes(gongXu)">
                  <div class="itemDiv">
                    <img
                      src="../../assets/iconFont/效率 (1).png"
                      style="height: 20px; width: 20px; margin-bottom: 5px; margin-right: 2px"
                    />
                    <span
                      class="text1"
                      :title="`当前长度：${attrbuteObj.currentLength}`"
                      style="display: inline-block; font-size: 16px"
                    >
                      当前长度：{{ attrbuteObj.currentLength }}</span
                    >
                  </div>
                </Col>

                <Col span="8" class="ivu-mb-8 ivu-pl-8" v-if="gongXu === '细纱'">
                  <div class="itemDiv">
                    <img
                      src="../../assets/iconFont/线圈.png"
                      style="height: 20px; width: 20px; margin-bottom: 5px; margin-right: 2px"
                    />
                    <span
                      class="text1"
                      :title="`千锭时断头：${attrbuteObj.breakCntPerKilo}`"
                      style="display: inline-block; font-size: 16px"
                    >
                      千锭时断头：{{ attrbuteObj.breakCntPerKilo }}</span
                    >
                  </div>
                </Col>
                <Col span="8" class="ivu-mb-8 ivu-pl-8" v-if="prcessArr2.includes(gongXu)">
                  <div class="itemDiv">
                    <img
                      src="../../assets/iconFont/产量.png"
                      style="height: 20px; width: 20px; margin-bottom: 5px; margin-right: 2px"
                    />
                    <span
                      v-if="gongXu === '梳棉' || gongXu === '并条' || gongXu === '精梳'"
                      class="text1"
                      :title="`出条速度：${attrbuteObj.speedAvg1}`"
                      style="display: inline-block; font-size: 16px"
                    >
                      出条速度：{{ attrbuteObj.speedAvg1 }}</span
                    >
                    <span
                      v-else-if="gongXu === '粗纱' || gongXu === '细纱'"
                      class="text1"
                      :title="`锭速：${attrbuteObj.speedAvg1}`"
                      style="display: inline-block; font-size: 16px"
                    >
                      锭速：{{ attrbuteObj.speedAvg1 }}</span
                    >
                    <span
                      v-else-if="gongXu === '条卷'"
                      class="text1"
                      :title="`车速：${attrbuteObj.speedAvg1}`"
                      style="display: inline-block; font-size: 16px"
                    >
                      车速：{{ attrbuteObj.speedAvg1 }}</span
                    >
                  </div>
                </Col>
                <Col
                  span="8"
                  class="ivu-mb-8 ivu-pl-8"
                  v-if="gongXu === '细纱' || gongXu === '粗纱' || gongXu === '精梳'"
                >
                  <div class="itemDiv">
                    <img
                      src="../../assets/iconFont/平均车速.png"
                      style="height: 20px; width: 20px; margin-bottom: 5px; margin-right: 2px"
                    />
                    <span
                      v-if="gongXu === '细纱'"
                      class="text1"
                      :title="`前罗拉速度：${attrbuteObj.speedAvg2}`"
                      style="display: inline-block; font-size: 16px"
                    >
                      前罗拉速度：{{ attrbuteObj.speedAvg2 }}</span
                    >
                    <span
                      v-else-if="gongXu === '粗纱'"
                      class="text1"
                      :title="`罗拉速度：${attrbuteObj.speedAvg2}`"
                      style="display: inline-block; font-size: 16px"
                    >
                      罗拉速度：{{ attrbuteObj.speedAvg2 }}</span
                    >
                    <span
                      v-else-if="gongXu === '精梳'"
                      class="text1"
                      :title="`梳理速度：${attrbuteObj.speedAvg2}`"
                      style="display: inline-block; font-size: 16px"
                    >
                      梳理速度：{{ attrbuteObj.speedAvg2 }}</span
                    >
                    <!--                    <span v-else-if="gongXu === '梳棉'" class="text1" :title="`道夫速度：${attrbuteObj.speedAvg2}`"-->
                    <!--                          style="display:inline-block; font-size: 16px;"> 道夫速度：{{ attrbuteObj.speedAvg2 }}</span>-->
                  </div>
                </Col>
                <Col v-if="gongXu === '织机'" span="8" class="ivu-mb-8 ivu-pl-8">
                  <div class="itemDiv">
                    <img
                      src="../../assets/iconFont/产量.png"
                      style="height: 20px; width: 20px; margin-bottom: 5px; margin-right: 2px"
                    />
                    <span style="display: inline-block; font-size: 16px">
                      纬密：{{ attrbuteObj.latitudeDensity }}</span
                    >
                  </div>
                </Col>
                <Col v-if="gongXu === '织机'" span="8" class="ivu-mb-8 ivu-pl-8">
                  <div class="itemDiv">
                    <img
                      src="../../assets/iconFont/产量查询.png"
                      style="height: 20px; width: 20px; margin-bottom: 5px; margin-right: 2px"
                    />
                    <span
                      class="text1"
                      :title="`织布长度：${attrbuteObj.loomLength}`"
                      style="display: inline-block; font-size: 16px"
                    >
                      织布长度：{{ attrbuteObj.loomLength }}</span
                    >
                  </div>
                </Col>
                <Col v-if="gongXu === '织机'" span="8" class="ivu-mb-8 ivu-pl-8">
                  <div class="itemDiv">
                    <img
                      src="../../assets/iconFont/效率 (1).png"
                      style="height: 20px; width: 20px; margin-bottom: 5px; margin-right: 2px"
                    />
                    <span
                      class="text1"
                      :title="`打纬速度：${attrbuteObj.beatLatitudeSpeed}`"
                      style="display: inline-block; font-size: 16px"
                    >
                      打纬速度：{{ attrbuteObj.beatLatitudeSpeed }}</span
                    >
                  </div>
                </Col>
                <Col v-if="gongXu === '织机'" span="8" class="ivu-mb-8 ivu-pl-8">
                  <!--                               细纱特有字段 -->
                  <div class="itemDiv">
                    <img
                      src="../../assets/iconFont/线圈.png"
                      style="height: 20px; width: 20px; margin-bottom: 5px; margin-right: 2px"
                    />
                    <span
                      class="text1"
                      :title="`经停次数：${attrbuteObj.longitudeStopNum}`"
                      style="display: inline-block; font-size: 16px"
                    >
                      经停次数：{{ attrbuteObj.longitudeStopNum }}</span
                    >
                  </div>
                </Col>
                <Col v-if="gongXu === '织机'" span="8" class="ivu-mb-8 ivu-pl-8">
                  <div class="itemDiv">
                    <img
                      src="../../assets/iconFont/线圈 (1).png"
                      style="height: 20px; width: 20px; margin-bottom: 5px; margin-right: 2px"
                    />
                    <span
                      class="text1"
                      :title="`纬停次数：${attrbuteObj.latitudeStopNum}`"
                      style="display: inline-block; font-size: 16px"
                    >
                      纬停次数：{{ attrbuteObj.latitudeStopNum }}</span
                    >
                  </div>
                </Col>
              </row>
            </div>
          </TabPane>
          <TabPane
            v-if="!(gongXuStr == '络筒' && attrbuteObj.manufacturerName !== '青岛宏大')"
            :index="2"
            label="实时状态"
            name="realtime"
            tab="div2"
          >
            <div
              style="overflow-y: auto; height: 45vh; margin-top: 10px"
              v-if="realtime != null && realtime.length != 0"
            >
              <row>
                <Col span="8" v-for="(item, index) in realtime" :key="index">
                  <div class="itemDiv">
                    <div
                      class="text1Div"
                      :title="item.key + ':' + item.value"
                      style="font-size: 16px; margin-left: 5px"
                      >{{ item.key }}:
                    </div>
                    <div
                      class="text4"
                      :title="item.key + ':' + item.value"
                      style="font-size: 16px; margin-left: 5px"
                    >
                      {{ item.value }}
                    </div>
                  </div>
                </Col>
              </row>
            </div>
            <div v-else class="flex flex-CC" style="margin-top: 50px; flex-direction: column">
              <img src="@/assets/svg/zanWuXinXi2.svg" style="width: 180px; height: 140px" />
              <span>暂无数据</span>
            </div>
          </TabPane>
          <TabPane
            v-if="!(gongXuStr == '络筒' && attrbuteObj.manufacturerName !== '青岛宏大')"
            :index="3"
            label="故障信号"
            name="warning"
            tab="div2"
          >
            <div
              style="overflow-y: auto; height: 45vh; margin-top: 10px"
              v-if="warning != null && warning.length != 0"
            >
              <row>
                <Col span="8" v-for="(item, index) in warning" :key="index">
                  <div class="itemDiv">
                    <div
                      style="
                        width: 12px;
                        height: 12px;
                        border-radius: 6px;
                        margin-top: 6px;
                        background: #f82323;
                      "
                    ></div>
                    <div
                      class="text4"
                      :title="item.key + ':' + item.value"
                      style="font-size: 16px; margin-left: 5px"
                    >
                      {{ item.key }}
                    </div>
                  </div>
                </Col>
              </row>
            </div>
            <div v-else class="flex flex-CC" style="margin-top: 50px; flex-direction: column">
              <img src="@/assets/svg/zanWuXinXi2.svg" style="width: 180px; height: 140px" />
              <span>暂无数据</span>
            </div>
          </TabPane>
          <TabPane
            v-if="!(gongXuStr == '络筒' && attrbuteObj.manufacturerName !== '青岛宏大')"
            :index="4"
            label="IO信号"
            name="io"
            tab="div2"
          >
            <div
              style="overflow-y: auto; height: 45vh; margin-top: 10px"
              v-if="io != null && io.length != 0"
            >
              <row>
                <Col span="8" v-for="(item, index) in io" :key="index">
                  <div class="itemDiv">
                    <div
                      class="text1Div"
                      :title="item.key + ':' + item.value"
                      style="font-size: 16px; margin-left: 5px"
                      >{{ item.key }}:
                    </div>
                    <div
                      class="text4"
                      :title="item.key + ':' + item.value"
                      style="font-size: 16px; margin-left: 5px"
                    >
                      {{ item.value }}
                    </div>
                  </div>
                </Col>
              </row>
            </div>
            <div v-else class="flex flex-CC" style="margin-top: 50px; flex-direction: column">
              <img src="@/assets/svg/zanWuXinXi2.svg" style="width: 180px; height: 140px" />
              <span>暂无数据</span>
            </div>
          </TabPane>
          <TabPane
            v-if="!(gongXuStr == '络筒' && attrbuteObj.manufacturerName !== '青岛宏大')"
            :index="5"
            label="工艺设定"
            name="process"
            tab="div2"
          >
            <div
              style="overflow-y: auto; height: 45vh; margin-top: 10px"
              v-if="process != null && process.length != 0"
            >
              <row>
                <Col span="8" v-for="(item, index) in process" :key="index">
                  <div class="itemDiv">
                    <div
                      class="text1Div"
                      :title="item.key + ':' + item.value"
                      style="font-size: 16px; margin-left: 5px"
                      >{{ item.key }}:
                    </div>
                    <div
                      class="text4"
                      :title="item.key + ':' + item.value"
                      style="font-size: 16px; margin-left: 5px"
                    >
                      {{ item.value }}
                    </div>
                  </div>
                </Col>
              </row>
            </div>
            <div v-else class="flex flex-CC" style="margin-top: 50px; flex-direction: column">
              <img src="@/assets/svg/zanWuXinXi2.svg" style="width: 180px; height: 140px" />
              <span>暂无数据</span>
            </div>
          </TabPane>
          <TabPane
            v-if="!(gongXuStr == '络筒' && attrbuteObj.manufacturerName !== '青岛宏大')"
            :index="6"
            label="基础设定"
            name="settings"
            tab="div2"
          >
            <div
              style="overflow-y: auto; height: 45vh; margin-top: 10px"
              v-if="settings != null && settings.length != 0"
            >
              <row>
                <Col span="8" v-for="(item, index) in settings" :key="index">
                  <div class="itemDiv">
                    <div
                      class="text1Div"
                      :title="item.key + ':' + item.value"
                      style="font-size: 16px; margin-left: 5px"
                      >{{ item.key }}:
                    </div>
                    <div
                      class="text4"
                      :title="item.key + ':' + item.value"
                      style="font-size: 16px; margin-left: 5px"
                    >
                      {{ item.value }}
                    </div>
                  </div>
                </Col>
              </row>
            </div>
            <div v-else>
              <div class="flex flex-CC" style="margin-top: 50px; flex-direction: column">
                <img src="@/assets/svg/zanWuXinXi2.svg" style="width: 180px; height: 140px" />
                <span>暂无数据</span>
              </div>
              <!--              <img src="@/assets/images/guoji.png" v-if="menuCollapse">-->
            </div>
          </TabPane>
          <TabPane
            v-if="!(gongXuStr == '络筒' && attrbuteObj.manufacturerName !== '青岛宏大')"
            :index="7"
            label="历史状态"
            name="liShiZhuangTai"
            tab="div2"
          >
            <div
              style="overflow-y: auto; height: 45vh"
              v-if="liSiData != null && liSiData.length != 0"
            >
              <Timeline class="ivu-mt-16">
                <TimelineItem color="blue" v-for="(item, index) in liSiData" :key="index">
                  <div style="display: flex">
                    <p class="shijianZhou" :style="{ color: '#181717' }">{{ item.startTime }}</p>
                    <p
                      class="shijianZhou jianJU1"
                      :style="{ color: item.machineRtType === 1 ? '#e64c17' : '#28297b' }"
                    >
                      {{ item.codeName }}</p
                    >
                    <p
                      class="shijianZhou jianJU2"
                      :style="{ color: item.machineRtType === 1 ? '#e64c17' : '#28297b' }"
                    >
                      持续时间：{{ getDuration(item.duration) }}</p
                    >
                  </div>
                </TimelineItem>
              </Timeline>
              <Divider>
                <Button
                  style="color: #1e93ff"
                  type="text"
                  ghost
                  :loading="loading"
                  @click="jiaZaiGenDuoClick"
                >
                  <span v-if="!loading">加载更多</span>
                  <span v-else>加载中...</span>
                </Button>
              </Divider>
            </div>
            <div v-else class="flex flex-CC" style="margin-top: 50px; flex-direction: column">
              <img src="@/assets/svg/zanWuXinXi2.svg" style="width: 180px; height: 140px" />
              <span>暂无数据</span>
            </div>
          </TabPane>
        </Tabs>
      </div>
    </Modal>
  </div>
</template>
<script setup lang="ts">
  import { getJiTaiXiangQinList, getDanJiQiangQinLiShi } from '@/api/shengChanJianShi'
  import { ElMessage } from 'element-plus'
  import dayjs from 'dayjs'
  import { zhuanTai } from '@/utils/custom/index'

  const props = defineProps({
    gongXuStr: String,
    biaoQianBool: {
      default: true,
      type: Boolean
    }
  })

  const loading = ref(false)
  const gongXu = ref('')
  const spinShow = ref(true)
  const modelShow = ref(false)
  const attrbuteObj: any = ref({})
  const itemValue: any = ref({})
  // const divHeight2 = ref('300px')
  const titleString = ref('')
  const valueKeys: any = ref([])
  const realtime: any = ref([])
  const warning: any = ref([])
  const io: any = ref([])
  const process: any = ref([])
  const settings: any = ref([])
  const tabname = ref('')
  const pageIndex = ref(0)
  const liSiData: any = ref([])
  const prcessArr1 = ref([
    '梳棉',
    '条卷',
    '二并',
    '预并',
    '末并',
    '并条',
    '精梳',
    '粗纱',
    '细纱',
    '络筒'
  ])
  const prcessArr2 = ref(['梳棉', '条卷', '并条', '精梳', '粗纱', '细纱'])

  // 显示右侧抽屉
  const show = (item) => {
    if (valueKeys.value.length === 0) {
      valueKeys.value = JSON.parse(localStorage.getItem('valueKeys'))
    }
    spinShow.value = true
    tabname.value = 'JiChu'
    modelShow.value = !modelShow.value
    itemValue.value = item
    gongXu.value = item.craftNodeName
    titleString.value = item.craftNodeName + '_' + item.machineTypeName + '-' + item.machineName
    pageIndex.value = 0
    getJiTaiXiangQinData()
  }
  const tabsClick = (name) => {
    if (name === 'liShiZhuangTai') {
      getDanJiQiangQinLiShiData()
    }
  }
  // 历史状态接口
  const getDanJiQiangQinLiShiData = () => {
    let data = {
      machineDocumentId: itemValue.value.id,
      craftNodeId: itemValue.value.craftNodeId,
      pageIndex: pageIndex.value
    }
    loading.value = true
    liSiData.value = []
    getDanJiQiangQinLiShi(data)
      .then((res) => {
        loading.value = false
        liSiData.value = res
      })
      .catch(() => {
        loading.value = false
      })
  }
  // 记载更多
  const jiaZaiGenDuoClick = () => {
    loading.value = true
    pageIndex.value++
    let data = {
      machineDocumentId: itemValue.value.id,
      craftNodeId: itemValue.value.craftNodeId,
      pageIndex: pageIndex.value++
    }
    getDanJiQiangQinLiShi(data)
      .then((res: any) => {
        loading.value = false
        if (res.length !== 0) {
          liSiData.value.push(...res)
        } else {
          ElMessage.warning('暂无更多信息可供加载')
        }
      })
      .catch(() => {
        loading.value = false
      })
  }
  const getJiTaiXiangQinData = () => {
    realtime.value = []
    warning.value = []
    io.value = []
    process.value = []
    settings.value = []
    attrbuteObj.value = {}
    getJiTaiXiangQinList(itemValue.value.id)
      .then((res: any) => {
        spinShow.value = false
        attrbuteObj.value = res.basic
        if (attrbuteObj.value.runEfc !== null) {
          attrbuteObj.value.runEfc = parseFloat(attrbuteObj.value.runEfc).toFixed(2)
        }
        let caiJiList: any = valueKeys.value.find((value) => {
          return attrbuteObj.value.craftNodeId === value.craftNodeId
        }).collectMeta

        if (res.machineRealInfo !== null) {
          if ('realtime' in res.machineRealInfo) {
            let realtime = res.machineRealInfo.realtime
            for (let key in realtime) {
              let item = caiJiList.find((value) => {
                return key.toUpperCase() == value.code && value.isShowWeb === true
              })
              if (item !== undefined) {
                realtime.push({
                  key: item.name,
                  code: item.code,
                  value: realtime[key] + item.magnificationUnit
                })
              }
            }
            realtime.sort((a, b) => {
              return a.code.localeCompare(b.code, undefined, {
                numeric: true,
                sensitivity: 'base'
              })
            })
          }
          if ('io' in res.machineRealInfo) {
            let io = res.machineRealInfo.io
            for (let key in io) {
              let item = caiJiList.find((value) => {
                return key.toUpperCase() == value.code && value.isShowWeb === true
              })
              if (item !== undefined) {
                io.push({
                  key: item.name,
                  code: item.code,
                  value: io[key] + item.magnificationUnit
                })
              }
            }
            io.sort((a, b) => {
              return a.code.localeCompare(b.code, undefined, {
                numeric: true,
                sensitivity: 'base'
              })
            })
          }
          if ('warning' in res.machineRealInfo) {
            let warning = res.machineRealInfo.warning
            for (let key in warning) {
              let item = caiJiList.find((value) => {
                return key.toUpperCase() == value.code && value.isShowWeb === true
              })
              if (item !== undefined) {
                warning.push({
                  key: item.name,
                  code: item.code,
                  value: warning[key]
                })
              }
            }
            warning.sort((a, b) => {
              return a.code.localeCompare(b.code, undefined, {
                numeric: true,
                sensitivity: 'base'
              })
            })
          }
          if ('process' in res.machineRealInfo) {
            let process = res.machineRealInfo.process
            for (let key in process) {
              let item = caiJiList.find((value) => {
                return key.toUpperCase() == value.code && value.isShowWeb === true
              })
              if (item !== undefined) {
                process.push({
                  key: item.name,
                  code: item.code,
                  value: process[key] + item.magnificationUnit
                })
              }
            }
            process.sort((a, b) => {
              return a.code.localeCompare(b.code, undefined, {
                numeric: true,
                sensitivity: 'base'
              })
            })
          }
          if ('settings' in res.machineRealInfo) {
            let settings = res.machineRealInfo.settings
            for (let key in settings) {
              let item = caiJiList.find((value) => {
                return key.toUpperCase() == value.code && value.isShowWeb === true
              })
              if (item !== undefined) {
                settings.push({
                  key: item.name,
                  code: item.code,
                  value: settings[key] + item.magnificationUnit
                })
              }
            }
            let url = window.location.href
            if (url.indexOf('msszh') !== -1) {
              settings.forEach((value) => {
                if (value.key == '实际重量') {
                  value.value = '28.85 g/5m'
                }
                if (value.key == '目标重量') {
                  value.value = '29.00 g/5m'
                }
              })
            }
            settings.sort((a, b) => {
              return a.code.localeCompare(b.code, undefined, {
                numeric: true,
                sensitivity: 'base'
              })
            })
          }
        }
      })
      .catch(() => {
        spinShow.value = false
      })
  }
  // const objKeySort = (arys) => {
  //   // 先用Object内置类的keys方法获取要排序对象的属性名，再利用Array原型上的sort方法对获	取的属性名进行排序，newkey是一个数组
  //   const newkey = Object.keys(arys).sort()
  //   // newkey.reverse()
  //   // console.log('newkey='+newkey);
  //   const newObj = {} // 创建一个新的对象，用于存放排好序的键值对
  //   for (let i = 0; i < newkey.length; i++) {
  //     // 遍历newkey数组
  //     newObj[newkey[i]] = arys[newkey[i]] // 向新创建的对象中按照排好的顺序依次增加键值对
  //   }
  //   return newObj // 返回排好序的新对象
  // }
  const getDuration = (second) => {
    let minutes = Math.round(second / 1000 / 60)
    let hours = Math.round(minutes / 60)
    let days = Math.round(hours / 24)
    // let months = Math.round(days / 30);
    // let years = Math.round(months / 12);
    // let oldType = ''
    let oldValue: number | string = 0
    if (days > 0) {
      // 几天前
      // oldType = 'day'
      oldValue = days + '天' + (hours - 24 * days) + '小时' + (minutes - 60 * hours) + '分'
    } else {
      if (hours > 0) {
        // 几小时前
        // oldType = 'hour'
        oldValue = hours + '小时' + (minutes - 60 * hours) + '分'
      } else {
        // 这里  您可以处理一个  刚刚  比如时间小于30分钟
        if (minutes > 0) {
          // 几分钟前
          // oldType = 'minute'
          oldValue = minutes + '分钟'
        } else {
          // 几秒前
          oldValue = '小于1分钟'
        }
      }
    }
    return oldValue
  }
</script>
<style lang="scss">
  .demo-drawer-footer {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    background: #fff;
  }

  .tagZhuangTaiDiv {
    .ivu-tag-text {
      color: #333333 !important;
      font-weight: bold;
    }
  }
  .jiTaiDiv {
    .ivu-card-bordered {
      border: 2px solid #ded9da !important;
      box-sizing: border-box !important;
      box-shadow: 3px 5px 5px #d5e6f8 !important;
    }
  }

  .ivu-radio-group {
    width: 100% !important;
  }

  .text1Div {
    display: inline-block;
    cursor: default;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .text4 {
    display: inline-block;
    cursor: default;
    overflow: hidden;
    flex-grow: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .text1:hover {
  }

  .text2 {
    display: inline-block;
    cursor: default;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .text3 {
    width: 25%;
    padding-left: 4px;
    text-align: left;
    cursor: default;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .text2:hover {
  }

  .cardPading {
    .ivu-card-body {
      padding: 16px 0px;
    }
  }

  .shijianZhou {
    font-size: 16px;
    color: #1e93ff;
    display: block;
  }

  .jianJU1 {
    font-size: 16px;
    margin-left: 40px;
    width: 400px;
    font-weight: bold;
    text-overflow: ellipsis; /*让截断的文字显示为点点。还有一个值是clip意截断不显示点点*/
    white-space: nowrap; /*让文字不换行*/
    overflow: hidden; /*超出要隐藏*/
  }

  .jianJU2 {
    margin-left: 30px;
  }

  .transition-box {
    margin-top: 32px;
    width: 100%;
    border-radius: 4px;
    background-color: #409eff;
    text-align: center;
    color: #fff;
    padding: 24px 0;
  }

  .fenZuZhuangTai6 {
    opacity: 0.3; /* 不透明度 */
    background-color: red;
  }

  .titleSpan {
    display: inline-block;
    font-size: 16px;
    line-height: 30px;
    font-weight: 600;
  }

  .itemDiv {
    margin-bottom: 12px;
    display: flex;
    flex-direction: row;
  }
</style>
